<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统管理首页</title>
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <style>
        /* 去掉超链接下划线 */
        a {
            text-decoration: none;
        }

        /* 自定义导航栏背景颜色和文本颜色 */
        .bg-custom {
            background-color: #add8e6; /* 浅蓝色 */
            height: 100vh; /* 将高度设置为视口高度 */
        }

        .text-custom {
            color: #ffffff; /* 白色文本 */
        }

        /* 增加导航栏项之间的间距 */
        .nav-item {
            margin-bottom: 60px;
        }

        /* 增大特定文本的字体大小 */
        .enlarged-text {
            font-size: 24px;
        }

        /* 修改顶部导航栏颜色 */
        .top-nav {
            background-color: #add8e6;
        }

        /* 轮播图容器样式 */
        .carousel-container {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 页眉 -->
    <div class="row top-nav text-light" style="min-height: 60px">
        <div class="col-2"><img src="../img/1.jpg" width="100%" alt=""></div>
        <div class="col-8 text-center">
            <p class="enlarged-text" style="font-family: '华文楷体'; font-size: 48px; font-weight: bold;">欢迎使用教职工管理系统</p>
        </div>
        <div class="col-2">
            <!-- 当前用户信息和注销按钮 -->
            当前用户: <span th:text="${user}"></span>
            <button class="btn btn-info">注销</button>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="row" style="min-height: 400px;">
        <!-- 侧边导航栏 -->
        <div class="col-2 bg-custom text-custom">
            <ul style="list-style-type: none; padding-left: 0;">
                <li class="nav-item"><a href="/main" class="text-custom enlarged-text">管理系统首页</a></li>
                <li class="nav-item"><a href="/teacher/teacherList" class="text-custom enlarged-text">书籍管理</a></li>
            </ul>
        </div>
        <!-- 主要内容区域 -->
        <div class="col-10">
            <p>对商品进行更新操作</p>
                <div class="form-control">
                    <label for="">序号</label>
                    <input type="text" name="id" id="id" th:value="${data.id}" disabled="disabled">
                </div>
                <div class="form-control">
                    <label for="">名字</label>
                    <input type="text" name="name" id="name" th:value="${data.name}">
                </div>
                <div class="form-control">
                    <label for="">年龄</label>
                    <input type="text" name="age" id="age" th:value="${data.age}">
                </div>

                <div class="form-control">
                    <button class="btn btn-danger" id="btnUpdate">
                        更新
                    </button>
                </div>

        </div>
    </div>
</div>

</body>
</html>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script>
    $('#btnUpdate').click(function (){
        var flag = confirm("确认提交更新？");
        if (flag==true){
            $.post("/api/teacherUpdateProcess",{"id":$('#id').val(),"name":$('#name').val(),"age":$('#age').val()
            },function (res){
                if (res==1){
                    alert("更新完成");
                    location.href="/teacher/teacherList";
                }else {
                    alert("更新失败");
                }
            })
        }
    })
</script>
